<template>
    <!-- 变更方法
    vue可以监听响应式变更方法,并在它们被调用的时候触发相关的更新,包括
    push() pop() shift() unshift() splice() sort() reverse()
     -->
  <h3>数组变化监听</h3>
  <button @click="addListenHand">添加数据</button>
  <ul>
    <li v-for="(item, index) of getList" :key="index">{{ item }}</li>
  </ul>
  <button @click="concatHandle">合并数组1和2给1</button>
  <h4>数组1</h4>
  <p v-for="(item,index) of num1" :key="index">{{ item }}</p>
  <h4>数组2</h4>
  <p v-for="(item,index) of num2" :key="index">{{ item }}</p>
</template>

<script>
export default {
  data() {
    return {
      getList: ["张三", "李四", "王舞"],
      num1: [1,2,3,4,5],
      num2: [6,7,8,9,10]
    };
  },
  methods: {
    addListenHand() {
        // 这里会把数组 getList 内容添加一个元素,同时更新到页面上
        this.getList.push("赵四")
        // 这里添加数组元素,但是不会更新到UI上,也不会更改现有数组的内容
        this.getList.concat("神王三") // 返回值会带上这个元素,但是数组不会
        console.log(this.getList.concat("神王三"))
        console.log(this.getList) // 这个数组没有 "神王三" 但是有 "赵四"
        this.getList = this.getList.concat("神王五") // 这样就可以带上了
        // filter() concat() slice()都不会改变原来数组的内容,会加在返回值上成为新的数组
    },
    concatHandle() {
        this.num1 = this.num1.concat(this.num2)
    }
  },
};
</script>
